<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>document获得元素，修改元素</title>
		<style>
			#d1{
				border: 2px solid red;
			}
		</style>
		<script>
			//改属性
			function changeFont(){
				//let h=document.getElementsByName("adv")[0];
				
				//let h=document.getElementById("slogon");
				//let h=document.getElementsByTagName("h2")[0];
				let h=window.document.querySelector("#slogon");
				if(h.align=="right")
					h.align="left";
				else	
				    h.align="right";
			}
			function changeDiv(){
				var d=document.getElementById("d1");
				alert("innerhtml:"+d.innerHTML);
				//d.innerHTML+="<h3>上课专心，不要看自己的屏幕</h3>";
				d.innerText+="<h3>上课专心，不要看自己的屏幕</h3>";
			}
			function showPass(){
				//alert(document.getElementById("pass").value);
				//document.getElementById("pass").type="text";
				document.querySelector("p #pass").type="text";
				//document.querySelectorAll("*")
				
			}
			function ShowLike(){
				var ar=document.getElementsByName("like");
				console.log(ar);
				let str="";
				for(let o of ar){
					//console.log(o);
					if(o.checked){
						str+=o.value+"&nbsp;&nbsp;";
					}
				}
				document.getElementById("show").innerHTML=str;
			}
		</script>
	</head>
	<body>
		<h2 id="slogon" name="adv">教育改变生活</h2>
		<div id="d1"></div>
		<p>
			密码:<input type="password" name="pass" id="pass"/>
			<button type="button" onclick="showPass()">👁️</button>
		</p>
		<p>
			爱好:
			<input type="checkbox" name="like" value="跳舞"/>跳舞
			<input type="checkbox" checked name="like" value="唱歌"/>唱歌
			<input type="checkbox" name="like" value="rap"/>rap
			<input type="checkbox" name="like" value="study"/>学习
			<input type="checkbox" name="like" value="game"/>游戏
			<span id="show"></span>
		</p>
		
		<div>
			<button type="button" onclick="changeFont()"> 让文字靠右！</button>
			<button type="button" onclick="changeDiv()">改内容</button>
			<button type="button" onclick="ShowLike()">你的爱好</button>
		</div>
	</body>
</html>